<template>
	<div>
		<!-- 搜索条件 -->
		<yd-form ref="myForm" :options="formOptions" :model="extendData" :btns="formBtns"></yd-form>
		<!-- 数据列表 -->
		<div class="list-table">
			<yd-table
				:formData="extendData"
				:tableConfig="tableConfig"
				:tableData="tableData"
				@sizeChangeHandler="getList"
				@currentChangeHandler="getList"
				@sortChangeHandler="getList"
			></yd-table>
		</div>
	</div>
</template>

<script setup name="RealtimeDialog" lang="ts">
import {
	queryNewestAlarmList,
	downloadNewestAlarmList,
	queryHealthAlarmList,
	getHealthAlarmListDownLoad,
} from '@/api/ops-workbench/index-more/realtimeDialog';
import { parseTime, downloadFromBlob } from '@/utils/common';
import { ElMessage } from 'element-plus';
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';
import ydForm from '@/components/YdForm/index.vue';

interface RouteParams {
	[key: string]: any;
}
const emit = defineEmits<{
	(e: 'close'): void;
}>();
const { proxy } = useCurrentInstance();
const router = useRouter();
const props = defineProps({
	params: {
		type: Object,
		default: () => {},
	},
});

const extendData: RouteParams = reactive({
	...props.params,
});
const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '系统名称',
		prop: 'systemId',
		selectKey: 'value',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
		cascaders: [
			{
				cascadersParams: 'businessCodeList',
				api: {
					name: 'queryBusinessOptions',
				},
			},
		],
	},
	{
		type: 'select',
		label: '业务名称',
		prop: 'businessCodeList',
		selectKey: 'value',
		attrs: {
			multiple: true,
			indeterminate: false,
		},
	},
	{
		type: 'input',
		label: '共用步骤/接口',
		prop: 'stepCode',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'select',
		label: '观察对象',
		prop: 'dataTypeList',
		selectKey: 'code',
		api: {
			name: 'queryObservationObject',
		},
		attrs: {
			multiple: true,
			indeterminate: false,
		},
	},
]);
const formBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '查询',
		handler: handleSearch,
	},
	{
		type: 'primary',
		text: '导出',
		handler: handleExport,
	},
]);
const tableConfig = reactive({
	columns: [
		{
			label: props.params.dialogType === 3 ? '告警时间' : '告警推送时间',
			prop: 'pushTime',
			sortable: true,
			formatter: (row: anyObj, val: ApiVal) => {
				if (props.params.dialogType === 3) {
					return row.cycleTime;
				} else {
					return val;
				}
			},
		},
		{
			label: '系统名称',
			prop: 'systemName',
		},
		{
			label: '业务名称',
			prop: 'businessName',
		},
		{
			label: '共用步骤/接口',
			prop: 'stepName',
		},
		{
			label: '观察对象',
			prop: 'observationObjectName',
		},
		{
			label: props.params.dialogType === 2 ? '失败率' : props.params.dialogType === 1 ? '响应慢比例' : '健康度',
			prop: props.params.dialogType === 2 ? 'failRate' : props.params.dialogType === 1 ? 'dealTimeAlarmRate' : 'healthRate',
			sortable: true,
			formatter: (row: anyObj, val) => {
				return val + '%';
			},
		},
		{
			label: props.params.dialogType === 3 ? '失败率' : '笔数',
			prop: props.params.dialogType === 3 ? 'failRate' : 'records',
			sortable: true,
			formatter: (row: anyObj, val) => {
				if (props.params.dialogType === 3) {
					return val + '%';
				} else {
					return row.records;
				}
			},
		},
		{
			label: '操作',
			prop: '',
			width: 100,
			operation: [
				{
					text: '告警分析',
					handler: (scope: anyObj) => jumpToAlarmAnalysis(scope.row),
				},
			],
		},
	],
	loading: false,
	pagination: {
		orderByColumn: '',
		isAsc: '',
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
});
const tableData = ref([]);
const exportLoading = ref(false);

onMounted(() => {
	handleSearch();
});

function handleSearch() {
	tableConfig.pagination.pageSize = 10;
	tableConfig.pagination.pageNum = 1;
	getList();
}
function getAlarmIndicatorCode() {
	switch (props.params.dialogType) {
		case 1:
			extendData.alarmIndicatorCode = 'BS_FAIL_RATE_20';
			break;
		case 2:
			extendData.alarmIndicatorCode = 'BS_FAIL_RATE_10';
			break;
		case 3:
			extendData.alarmIndicatorCode = 'BS_FAIL_RATE_30';
			break;
	}
	extendData.dialogType = undefined;
}
function getList() {
	tableConfig.loading = true;
	getAlarmIndicatorCode();
	if (props.params.dialogType === 3) {
		queryHealthAlarmList(extendData).then((res: ApiResponse) => {
			tableConfig.loading = false;
			if (res.code !== 0) {
				ElMessage.error(res.msg);
				return;
			}
			tableData.value = res.data.data;
			tableConfig.pagination.total = res.data.total;
		});
	} else {
		queryNewestAlarmList(extendData).then((res: ApiResponse) => {
			tableConfig.loading = false;
			if (res.code !== 0) {
				ElMessage.error(res.msg);
				return;
			}
			tableData.value = res.data.data;
			tableConfig.pagination.total = res.data.total;
		});
	}
}
// 导出
function handleExport() {
	exportLoading.value = true;
	getAlarmIndicatorCode();
	if (props.params.dialogType === 3) {
		getHealthAlarmListDownLoad(extendData).then((res) => {
			exportLoading.value = false;
			const currentDate = new Date();
			const currentDateTimeStr = parseTime(currentDate, '{y}{m}{d}{h}{i}{s}');
			let title = '最新健康度业务告警列表';
			downloadFromBlob(res, title + currentDateTimeStr + '.xlsx').then((o) => {
				if (!o.flag) {
					proxy.$modal.msgWarning(o.msg);
				}
			});
		});
	} else {
		downloadNewestAlarmList(extendData).then((res) => {
			exportLoading.value = false;
			const currentDate = new Date();
			const currentDateTimeStr = parseTime(currentDate, '{y}{m}{d}{h}{i}{s}');
			let title = '';
			switch (props.params.dialogType) {
				case 2:
					title = '最新失败业务告警列表';
					break;
				case 1:
					title = '最新响应慢业务告警列表';
					break;
				case 3:
					title = '最新健康度业务告警列表';
					break;
			}
			downloadFromBlob(res, title + currentDateTimeStr + '.xlsx').then((o) => {
				if (!o.flag) {
					proxy.$modal.msgWarning(o.msg);
				}
			});
		});
	}
}
// 告警分析列跳转至告警事件归档分析页面
function jumpToAlarmAnalysis(item: anyObj) {
	let titleTxt = '';
	switch (props.params.dialogType) {
		case 1:
			if (item.dataType === 3) {
				titleTxt = '共用步骤-' + item.stepName + '-响应慢业务告警分析';
			} else if (item.dataType === 4) {
				titleTxt = '共用接口-' + item.stepName + '-响应慢业务告警分析';
			} else {
				titleTxt = item.systemName + '-' + item.businessName + '-响应慢业务告警分析';
			}
			break;
		case 2:
			if (item.dataType === 3) {
				titleTxt = '共用步骤-' + item.stepName + '-失败业务告警分析';
			} else if (item.dataType === 4) {
				titleTxt = '共用接口-' + item.stepName + '-失败业务告警分析';
			} else {
				titleTxt = item.systemName + '-' + item.businessName + '-失败业务告警分析';
			}
			break;
		case 3:
			if (item.dataType === 3) {
				titleTxt = '共用步骤-' + item.stepName + '-健康度低业务告警分析';
			} else if (item.dataType === 4) {
				titleTxt = '共用接口-' + item.stepName + '-健康度低业务告警分析';
			} else {
				titleTxt = item.systemName + '-' + item.businessName + '-健康度低业务告警分析';
			}
			break;
	}
	emit('close');
	router.push({
		path: '/ops-workbench/business-alarm-analysis/index',
		query: {
			titleName: titleTxt,
			trendId: props.params.dialogType,
			areaId: props.params.dialogType,
			...item,
		},
	});
}
</script>

<style rel="stylesheet/scss" lang="scss"></style>
